<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!--360浏览器优先以webkit内核解析-->
  <title></title>
  <link rel="shortcut icon" href="favicon.ico">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
  <link th:href="@{/css/animate.css}" rel="stylesheet"/>
  <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
  <link th:href="@{/css/skins.min.css}" rel="stylesheet"/>
  <link th:href="@{/abvnet/css/abvnet.min.css}" rel="stylesheet"/>
</head>
<body>
<body class="gray-bg">
<div id="map" style="height: 100%;width: 100%;z-index: 1000"></div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/abvnet/js/abvnet.min.js}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=3.0&ak=nF0WM4xdPMyzteclTO3FuZLztSfmQL1u&services=&t=20190624113145"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
<script type="text/javascript">
  var map = null; // 地图变量
  var myGeo = null; // 地址/坐标转换变量
  var markers = []; // 保存地图标识集合
  let ENABLE_MAP_ZOOM = true;
  $(function() {
    $.ajax({
      cache : true,
      type : "GET",
      url : "/api/project/map",
      dataType: 'json',
      error : function(request) {
        $.modal.alertError("系统错误");
      },
      success : function(result) {
        let data = result.data;
        if (ENABLE_MAP_ZOOM) { // 是否允许缩放地图
          map = new BMap.Map("map");
        } else {
          map = new BMap.Map("map",{enableMapClick:false}); // 禁止点击事件
          map.disableDoubleClickZoom(); // 禁止双击放大
          map.disablePinchToZoom(); // 禁止双指放大
        }
        map.centerAndZoom("武汉", 6); // 定义中心坐标
        map.enableScrollWheelZoom(); // 允许鼠标滑轮缩放

        myGeo = new BMap.Geocoder();
        if (data) {
          for (var i = 0; i < data.length; i++) // 处理数据,转换地址->坐标
            geocodeSearch(data[i].address);
        }
        // 调用markerClusterer类,生成聚合数据,延迟加载,避免markers数据组数据未加载完成
        setTimeout(function(){
          var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});
        }, 2000);
      }
    });
  });

  // 具体地址查询后转换成坐标,并添加单击事件
  function geocodeSearch(add) {
    myGeo.getPoint(add, function(point){
      if (point) {
        var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
        markers.push(marker);
        if (ENABLE_MAP_ZOOM)
          addClickHandler(add,marker);
      }
    });
  }

  // 添加点击事件，显示具体地址信息
  function addClickHandler(content,marker){
    marker.addEventListener("click",function(e){
      openInfo(content,e)});
  }

  // 窗口对象
  var opts = {
    width : 200,     // 信息窗口宽度
    height: 80,     // 信息窗口高度
    title : "客户名称" // 信息窗口标题
  }

  function openInfo(content,e){
    var p = e.target;
    var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
    var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
    map.openInfoWindow(infoWindow,point); //开启信息窗口
  }
</script>
</body>
</html>
